<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="title">
			<image src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>拜访计划查看</text>
			<view class="ima">
			</view>
		</view> -->
		<hea-ders title="拜访计划查看">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<view class="name">
				<text>客户名称<text style="color: red;">*</text></text>
				<text>123</text>
			</view>
			<view class="name">
					<text>客户级别<text style="color: red;">*</text></text>
					<text>零售客户</text>
				</view>
				<view class="name">
						<text>客户地址<text style="color: red;">*</text></text>
						<input type="text" v-model="coneter" value="" placeholder-style="text-align:right;" placeholder="请输入地址"/>
					</view>
			<view class="name">
				<text>拜访日期<text style="color: red;">*</text></text>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date"  @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="name">
				<text>拜访时段<text style="color: red;">*</text></text>
				<view style="width: 20%; ">
					<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
		<view class="names">
			<text>拜访时段<text style="color: red;">*</text></text>
			<view class="uni-textarea">
			      <textarea  placeholder-style="text-align:right;" placeholder="请输入拜访计划内容"/>
			</view>
		</view>
	
		<view class="tab">
			<text>修改</text>
				<text @click="cancel">取消计划</text>
					<text @click="alter">到店</text>
		</view>
		<view class="tan" v-if="flag">
			<view class="zong">
				<text>取消原因：</text>
				<textarea v-model="yuanyi" value="" placeholder="" />
				<view class="bir">
					<text @click="flag =!flag">取消</text>
					<text style="color: rgba(35, 153, 246, 1);" @click="schedule">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			xflSelect,
			 heaDers
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				flag:false,
				coneter:'',
				yuanyi:'',
					date: currentDate,
						list: [ //要展示的数据
					'苹果',
					{
						value: '香蕉',
						disabled: false
					},
					'葡萄',
					'芒果',
					'大白菜',
				],
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			alter(){
				if(this.coneter=='') {
					uni.showModal({
						title:'客户地址为空',
						showCancel:false
					})
				}else {
					uni.navigateTo({
						url:'../shops/shops'
					})
				}
			},
			cancel(){
				this.flag =!this.flag
			},
			schedule(){
				if(this.yuanyi == ''){
					uni.showToast({
						title:'内容不能为空',
						duration: 2000,
						icon:'none'
					})
					return;
				}
					this.flag =!this.flag
			},
		}
	}
</script>

<style lang="scss" scoped>
 .center {
	 width: 100%;
	 height: 100vh;
	 box-sizing: border-box;
	 background: rgba(245, 245, 245, 1);
	 .tit {
	 	width: 100%;
	 	height: 50rpx;
	 	box-sizing: border-box;
	 }
	 
	 .title {
	 	width: 100%;
	 	height: 88rpx;
	 	padding: 0 30rpx;
	 	box-sizing: border-box;
	 	background-color: rgba(36, 153, 246, 1);
	 	display: flex;
	 	justify-content: space-between;
	 	align-items: center;
	 margin-bottom: 20rpx;
	 	image {
	 
	 		width: 22rpx;
	 	}
	 
	 	text {
	 		font-size: 36rpx;
	 		color: #fff;
	 		font-weight: 400;
	 		font-family: PingFang SC;
	 	}
	 
	 	.ima {
	 		image {
	 			width: 40rpx;
	 			margin-left: 5rpx;
	 		}
	 	}
	 }
	 .name {
	 	display: flex;
	 	justify-content: space-between;
	 	align-items: center;
	 	width: 100%;
	 	height: 88rpx;
	 	padding: 20rpx;
	 	box-sizing: border-box;
	 	background-color: #fff;
	 	border-bottom: 1rpx solid #e0e0e0;
	 
	 	text {
	 		font-size: 28rpx;
	 		font-family: PingFang SC;
	 		font-weight: 500;
	 		line-height: 40rpx;
	 		color: rgba(66, 66, 66, 1);
	 		opacity: 1
	 	}
	 
	 	image {
	 		width: 20rpx;
	 	}
	 
	 	.uni-list-cell-db {
	 		font-size: 28rpx;
	 		font-family: PingFang SC;
	 		font-weight: 500;
	 		line-height: 40rpx;
	 		color: rgba(66, 66, 66, 1);
	 		opacity: 1;
	 	}
	 }
	 .names {
	 	display: flex;
	 	justify-content: space-between;
	 	align-items: flex-start;
	 	width: 100%;
	 	padding: 20rpx;
	 	box-sizing: border-box;
	 	background-color: #fff;
	 	border-bottom: 1rpx solid #e0e0e0;
	 
	 text {
	 	
	 	font-size: 28rpx;
	 	font-family: PingFang SC;
	 	font-weight: 500;
	 	line-height: 40rpx;
	 	color: rgba(66, 66, 66, 1);
	 	opacity: 1
	 }
	 .uni-textarea {
	 	width: 80%;
	 	textarea{
	 		padding-right: 30rpx;
	 		box-sizing: border-box;
	 	}
	 }	
	 }
	 .tab {
		 position: fixed;
		 left: 0;
		 bottom: 0;
		 width: 100%;
		 height: 88rpx;
		 background-color: rgba(35, 153, 246, 1);
		 display: flex;
		
		 text {
			 flex: 1;
			 text-align: center;
			 display: inline-block;
			 height: 100%;
			 font-size:30rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 line-height:90rpx;
			 color:rgba(255,255,255,1);
			 opacity:1;
			 border-right: 1rpx solid #fff;
		 }
		 text:last-child {
			 border-right: none;
		 }
	 }
	.tan {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color:rgba(0, 0, 0, .5) ;
		
		.zong {
		position: relative;
			margin:50% auto;
			background-color: #fff;
			width: 70%;
			height:400rpx;
			border-radius: 5%;
			box-sizing: border-box;
			text {
				margin-left: 60rpx;
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:33rpx;
				color:rgba(97,97,97,1);
				opacity:1;
			}
			textarea {
				width: 94%;
				height: 60%;
				padding-left:30rpx;
				
			}
			.bir{
			position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				display: flex;
				text-align: center;
			text {
				height: 60rpx;
				line-height: 60rpx;
				flex: 1;
				display: inline-block;
			}
			}
		}
	}
 
 }
</style>
